<template>
  <views class="notification">
    <div class="notification_header">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <el-button type="primary" class="read_btn" @click="markRead">标记为已读</el-button>
    </div>

    <el-checkbox-group v-model="checkedNotifications" @change="handleCheckedCitiesChange" class="notification_list flex">
      <div v-for="noti in tableData" :key="noti.message_id" class="notification_item flex">
        <el-checkbox :label="noti.message_id" class="flex notification_label" v-if="noti.is_read == 0">
          <div class="notification_content">
            <div class="title">{{noti.message_title}}</div>
            <div class="description">{{noti.message_content}}</div>
          </div>
          <div class="detail_btn" @click.prevent  ="toDetail(noti.message_id)">详情</div>
        </el-checkbox>
        
        <div class="notification_content" v-if="noti.is_read == 1">
          <div class="title">{{noti.message_title}}</div>
          <div class="description">{{noti.message_content}}</div>
        </div>
        <div class="detail_btn" @click.prevent  ="toDetail(noti.message_id)">详情</div>
      </div>
    </el-checkbox-group>


    <div class="paging flex flexR">
      <el-pagination
              style="background:#fff; padding:10px 0"
              background
              layout="total, sizes,prev, pager, next, jumper"
              @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
              @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pagination.page_size"
              :total="pagination.total_count"
              :current-page="pagination.current_page"
              :page-count="pagination.page_count"
      ></el-pagination>
    </div>
  </views>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
      checkedNotifications: [],
      tableData: [
        {message_title: '这是个标题', message_content: '这是段描述文本', message_id: '1', is_read: 0},
        {message_title: '这是个标题2', message_content: '这是段描述文本2', imessage_idd: '2', is_read: 1},
        {message_title: '这是个标题3', message_content: '这是段描述文本3', message_id: '3', is_read: 0}
      ],
      isIndeterminate: true,
      pagination: {
        //分页数据
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      }
    };
  },
  computed: {
    post_data(){
      let post_data = {};
      post_data.pagination = this.pagination;
      return  post_data;
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedNotifications = val ? this.notifications : [];
      this.isIndeterminate = false;
      console.log(val,this.checkedNotifications);
    },
    handleCheckedCitiesChange(value) {
      console.log('checkbox', value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.notifications.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.notifications.length;
    },
    toDetail(info){
      this.$toRoutePath({
        path: "/notification/notification_detail",
        edit: true,
        query: { info }
      });
    },
    getData(){ 
      let {code, msg, data} = this.$api.sendSync(this.$mapapi.f_messageList, this.post_data);
      if(code != 200 && code != 501)    return  this.$message.error(msg);
      this.pagination = data.pagination;
      this.tableData = data.list;

    },
    markRead(){

    }
  },
  mounted() {
    this.$setRouteTitle();
  }
};
</script>


<style lang="less" scope="true" src="@/style/notification/notification.less">
</style>
